Para insertar una imagen en una página web, es muy recomendable que esta este guardada en formato GIF o JPG.

Si tenemos una imagen que queremos insertar, y esta ya tiene el tamaño adecuado en pixels, simplemente tendremos que poner el código <IMG> con un parámetro que indique el nombre del archivo, y el directorio en que se encuentra, en caso de que no esté en el mismo directorio en el que estamos grabando nuestros archivos HTML.

Supondremos que queremos insertar una imagen llamada "fotodemo-smiley.gif", que se encuentra entrando en el directorio "img" desde el directorio en el que tendremos nuestra página, esta imagen es de 40x40 pixels, para poder insertarla en nuestra página deberemos escribir...



Pero es posible que la imagen no tenga el tamaño adecuado, o no encaja bien donde deseamos. En tal caso podemos decir que tamaño es el que ocupe exactamente añadiendo los parámetros HEIGHT (altura) y WIDTH (anchura), asignando a cada uno de ellos el tañmaño deseado en pixels.

Así, si queremos que nuestra imagen de 40x40, aparezca en pantalla deformada para que su tamaño sea de 80x20, deberemos escribir...



También es posible que no queramos dar un tamaño fijo a nuestra imagen, sino que queremos que se adapte a la pantalla del navegador del cliente, en ese caso debemos indicar el tamaño como porcentaje del area visible del navegador.

En este caso, intentaremos que la imagen ocupe la mitad del alto y del ancho de la ventana, y se irá adaptando a la ventana aunque cambiemos el tamaño de esta...



Algunos navegadores al poner la imagen le añaden un pequeño contorno, generalmente del mismo color que el texto por defecto, y en el caso de que esta imagen la queramos converir en un enlace, la mayoria de los navegadores añadirán ese marco.

Para evitarlo, deberiamos añadir el parámetro adicional BORDER, asignándole el tamaño que queremos para ese contorno, en nuestro caso "0".

Así que nuestra imagen añadiendole un cierto contorno quedaría...